<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue/vue.global.js"></script>
		<script src="js/element/index.js"></script>
		<!-- 导入网路请求库 -->
		<script src="js/axios.min.js"></script>
		<link rel="stylesheet" href="css/element/index.css" />
		<!-- 引入参数处理的工具包，可以将对象进行序列化处理 -->
		<script src="js/qs.min.js"></script>
		<style>
		#app{
			width:500px;
			height: 300px;
			position: absolute;
			margin-left:27%;
			margin-top: 15%;
		}
		#app input{
			width:100%;
			line-height: 50px;
		}
		body{
			background-color: #B3E19D;
		}
		
		</style>
	</head>
	<body>
		<div id="app">
			<el-form :model="userBean" status-icon ref="userBean"  label-width="100px" class="demo-ruleForm">
			  <el-form-item prop="username">
			    <el-input prefix-icon="el-icon-user-solid" type="text" v-model="userBean.username" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item  prop="userpwd">
			    <el-input prefix-icon="el-icon-s-goods"  show-password type="password" v-model="userBean.userpwd" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button style="margin-left: 100px;" type="primary" @click="login()">提交</el-button>
			    <el-button @click="resetForm('userBean')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			userBean:{
				username:"",
				userpwd:""
			}
		},
		methods:{
			login:function(){
				console.log(this.userBean)
				console.log(Qs.stringify(this.userBean))
				var params=Qs.stringify(this.userBean)
				axios.post('http://localhost:8086/login',params)
				  .then(function (response) {
				  if(response.data=="ok"){
					  window.location.href="welcome.html"
				  }
				  })
				  .catch(function (error) {
				    
				  })
				  .then(function () {
				    
				  });
				
			},
			resetForm(formName) {
			        this.$refs[formName].resetFields();
			      }
		}
	})
	</script>
</html>
